<template>
    <div style="background-color: #5bc0de">
        <p>父组件</p>
        <p>***传递对象（父子修改数据项的属性，双方都会修改）****</p>
        <span>父组件user:{{user}}</span><br/>
        <!--加:是把user数据项的引用传过去了（也就是说修改父类的user值，子组件也变化），不加就是把'user'字符串传过去了-->
        <son :user="user" :msg="msg"></son>
        <button @click="addAge">父组件-用户年龄+1</button>
        <p>***传递简单类型（父修改子会变，子修改父不变）****</p>
        <span>父组件msg:{{msg}}</span><br/>
        <button @click="changeMsg">父组件-修改msg</button><br/>
    </div>
</template>

<script>
    import son from '@/components/father-son/son.vue';
    export default {
        name: "father",
        data(){
            return {
                user:{
                    name:'张三',
                    age:18
                },
                msg:'李四'
            }
        },
        methods:{
            addAge(){
                this.user.age++;
            },
            changeMsg(){
                this.msg = '张三父';
            }
        },
        components:{son}
    }
</script>

<style scoped>

</style>
